<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>抓拍人脸</span>
        <!-- 这里可以添加创建任务或其他操作的按钮 -->
      </div>
      <div class="filter-container">
        <!-- 搜索和过滤条件 -->
        <el-input
          v-model="listQuery.keyword"
          placeholder="请输入设备名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter">
          <template slot="append">
            <el-button
              icon="el-icon-camera"
              @click="handleScanImage"
            ></el-button>
          </template>
        />
        </el-input>
        <!-- 新增行政区划搜索框 -->
        <el-input
          v-model="listQuery.district"
          placeholder="请输入行政区划"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <!-- 新增小区名称搜索框 -->
        <el-input
          v-model="listQuery.community"
          placeholder="请输入小区名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <!-- 其他搜索条件 -->
        抓拍时间:
        <el-date-picker
          v-model="listQuery.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 230px;"
          class="filter-item"
          @change="handleDateRangeChange"
        />
        <!-- 其他搜索条件和按钮 -->
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter">搜索</el-button>
        <el-button
          class="filter-item"
          @click="resetFilter">重置</el-button>
      </div>
      <template>
        <div class="card-container">
          <div class="card" v-for="(item, index) in captureData" :key="item.id">
            <div class="card-header">
              <span>序号: {{ index + 1 }}</span>
            </div>
            <div class="card-content">

              <div class="card-image">
                <img :src="item.image" alt="Base64 Image">
              </div>
              <div class="card-info">
                <span>性别: {{ getGenderType(item.gender) }}</span>
              </div>
              <div class="card-info">
                <span>最小年龄: {{ item.minage }}</span>
              </div>
              <div class="card-info">
                <span>最大年龄: {{ item.maxage }}</span>
              </div>
              <div class="card-info">
                <span>抓拍时间: {{ item.date }}</span>
              </div>

            </div>
            <div class="card-footer">
              <el-button size="mini" @click="viewDetails(item)">查看详情</el-button>
            </div>
          </div>
        </div>
      </template>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {stompClient} from "../../api/test/test";

export default {
  name: "FaceCapture",
  data() {
    return {
      captureData: [
        { gender: 'male' },
        { gender: 'female' } // 注意这里是正确的拼写
      ],
      currentPage: 1,
      pageSize: 10,
      total: 100, // 假设总共有100条抓拍记录
      listQuery: {
        keyword: '',
        district: '',   // 行政区划搜索关键词
        community: '',   // 小区名称搜索关键词
        dateRange: [],  // 时间筛选的开始和结束日期,
        startDate:'',
        endData:''
      },
      base64Image:''
    };
  },
  methods: {
    handleDateRangeChange(value) {
      if (value) {
        this.listQuery.dateRange = value;
        // 可以在这里调用搜索方法或更新其他逻辑
      } else {
        this.listQuery.dateRange = [];
      }
    },
    // 添加日期格式化方法，如果需要
    formatDate(date) {
      const dt = new Date(date);
      return `${dt.getFullYear()}-${dt.getMonth() + 1}-${dt.getDate()}`;
    },
    handleFilter() {
      // 检查dateRange是否有值，如果有，则添加到搜索条件
      if (this.listQuery.dateRange && this.listQuery.dateRange.length === 2) {
        // 假设你有一个方法来格式化日期
        const startDate = this.formatDate(this.listQuery.dateRange[0]);
        const endDate = this.formatDate(this.listQuery.dateRange[1]);
        // 将格式化的日期添加到搜索条件中
        this.listQuery.startDate = startDate;
        this.listQuery.endDate = endDate;
      }
      // 调用搜索方法，传入当前的listQuery作为参数
      this.fetchData(this.listQuery);
    },
    handleScanImage() {
      // 这里是扫图识别的逻辑
      // 可能需要调用第三方库或API来实现扫图识别功能
      alert('扫图识别功能正在开发中...');
    },


    getData()
    {
      stompClient(this.listQuery).then(res=>{
         console.log(res)
         this.captureData=res.data.list;

       })

    },

    resetFilter() {
      this.listQuery.keyword = '';
      // 重置其他过滤条件
    },
    viewDetails(row) {
      // 查看抓拍详情的逻辑
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    getGenderType(gender) {
      return gender === 'male' ? '男' : (gender === 'female' ? '女' : '');
    }
  },
  created() {
    this.getData()
  }
};
</script>

<style scoped>
/* 您的样式定义 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #001528;
}

.card {
  width: calc(20% - 10px); /* 每个卡片占据20%的宽度，减去左右外边距 */
  margin: 5px; /* 简化为统一的上下左右外边距，这里设置为5px */
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.card-header {
  background-color: #f8f8f8;
  padding: 10px;
  font-weight: bold;
}

.card-content {
  padding: 10px;
}

.card-info {
  margin-bottom: 10px;
  color: #d8dce5;
}

.card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.card-footer {
  text-align: right;
  padding: 10px;
}
@keyframes glowing {
  0% {
    box-shadow: 0 0 5px #8687a9, 0 0 10px #fff;
  }
  50% {
    box-shadow: 0 0 20px #67aef1, 0 0 30px #e0e0e0;
  }
  100% {
    box-shadow: 0 0 5px #2379c0, 0 0 10px #fff;
  }
}
.card-image img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  transition: all 0.3s ease;
  animation: glowing 0.5s infinite alternate; /* 应用动画 */
}
.card-image img:hover {
  animation: glowing 2s infinite alternate;
}

</style>
